@import '@/style/variables.less';
.container {
  display: flex;
  flex-direction: row;
  .cardBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    & > div {
      margin: @cardlist-item-margin;
      width: @cardlist-item-width;
      .item {
        width: fit-content;
        border-radius: @cardlist-img-border-radius;
        position: relative;
        transition: transform 0.3s, opacity 0.5s, color 0.5s;
        .listen {
          user-select: none;
          background-color: @black;
          opacity: 0.8;
          font-size: 12px;
          color: #fff;
          position: absolute;
          width: fit-content;
          border-radius: 20px;
          padding: 4px 8px;
          bottom: 10px;
          right: 10px;
          & > i {
            font-size: 12px;
            margin-right: 5px;
          }
        }
        .toplay {
          font-size: @cardlist-toplay-width;
          position: absolute;
          top: @cardlist-toplay-relative;
          left: @cardlist-toplay-relative;
          color: #fff;
          transition: color 0.3s;
          &:hover {
            color: @cardlist-toplay-hover-color;
            opacity: 1;
          }
        }
        & > img {
          user-select: none;
          -webkit-user-drag: none;
          width: @cardlist-img-width;
          border-radius: @cardlist-img-border-radius;
        }
        &:hover {
          cursor: pointer;
          opacity: 0.8;
          transform: translateY(-10px);
        }
      }
      div:last-child {
        width: @cardlist-img-width;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: color 0.5s;
        &:hover {
          cursor: pointer;
          color: @green;
        }
      }
    }
  }
  .icon {
    display: block;
    font-size: @cardlist-icon-width;
    height: @cardlist-icon-width;
    width: @cardlist-icon-width;
    position: relative;
    top: @cardlist-icon-relative;
    flex: none;
    &.rightIcon {
      right: 40px;
    }
    &.show {
      visibility: hidden;
    }
  }
}
